<template>
  <a-layout style="min-height: 100vh">
    <!-- 左侧导航 -->
    <a-layout-sider collapsible v-model="collapsed">
      <div class="logo">ERP 系统</div>
      <a-menu theme="dark" mode="inline" :selectedKeys="[activePath]">
        <a-menu-item key="/dashboard" @click="go('/dashboard')">
          <a-icon type="dashboard" /><span>仪表盘</span>
        </a-menu-item>
        <a-menu-item key="/orders" @click="go('/orders')">
          <a-icon type="unordered-list" /><span>订单管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <!-- 顶部 -->
      <a-layout-header style="background: #fff; padding: 0 20px;">
        <a-breadcrumb style="line-height: 64px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-button type="primary" shape="circle" icon="user" style="float: right; margin: 16px;" />
      </a-layout-header>

      <!-- 主内容 -->
      <a-layout-content style="margin: 16px">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data: () => ({
    collapsed: false
  }),
  computed: {
    activePath() {
      return this.$route.path
    },
    title() {
      return this.$route.name
    }
  },
  methods: {
    go(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style>
.logo {
  height: 64px;
  margin: 16px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>
